<template>
	<view class="container">
	<custom-nav-bar
	      title="我的"
	      subtitle="专业预测，快速排盘"
		  bg-color="#4B79FF"
	    />
  <view class="mine-container"
  :style="{
    // height: `calc(100vh - ${navHeight}rpx)-${statusBarHeight}rpx)`,
    marginTop: `180rpx`,
  }">

    <!-- 用户信息 -->
    <view class="user-info">
      <image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
      <view class="info">
        <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
        <text class="phone">{{ userInfo.phone || '' }}</text>
      </view>
      <view class="edit-btn" @click="editProfile">
        <text class="iconfont icon-edit"></text>
      </view>
    </view>
    
    <!-- 用户数据 -->
    <view class="user-data">
      <view class="data-item">
        <text class="num">{{ userData.points || 0 }}</text>
        <text class="label">积分</text>
      </view>
      <view class="data-item">
        <text class="num">{{ userData.follows || 0 }}</text>
        <text class="label">关注</text>
      </view>
      <view class="data-item">
        <text class="num">{{ userData.fans || 0 }}</text>
        <text class="label">粉丝</text>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" v-for="(item, index) in functionList" :key="index" @click="handleFunction(item)">
        <view class="item-left">
          <text class="iconfont" :class="item.icon"></text>
          <text class="name">{{ item.name }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue'
import { ref, reactive, onMounted,onActivated  } from 'vue'
export default {
  components: {
	CustomNavBar
  },
  setup() {
  	const sysInfo = uni.getSystemInfoSync()
  	const statusBarHeight = ref(sysInfo.statusBarHeight+40)
  	const navHeight = ref(statusBarHeight.value + 60) // 增加导航栏高度
	},
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '',
        phone: ''
      },
      userData: {
        points: 0,
        follows: 0,
        fans: 0
      },
      functionList: [
        { name: '我的订单', icon: 'icon-order', url: '' },
        { name: '我的收藏', icon: 'icon-favorite', url: '' },
        { name: '地址管理', icon: 'icon-address', url: '' },
        { name: '账号设置', icon: 'icon-setting', url: '' },
        { name: '关于我们', icon: 'icon-about', url: '' }
      ]
    }
  },
  
  onShow() {
    this.loadUserInfo()
  },
  
  methods: {
    async loadUserInfo() {
      // TODO: 加载用户信息
	    const loginInfoKey = 'userInfo';
	        const storedLoginInfo = uni.getStorageSync(loginInfoKey);
	        if (storedLoginInfo) {
	          this.userInfo = JSON.parse(storedLoginInfo);
	        }
    },
    
    editProfile() {
      // TODO: 编辑个人资料
    },
    
    handleFunction(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    
    async handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync()
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.container {
	  min-height: 100vh;
	  background: #f5f5f5;
	}
.mine-container {
  // min-height: 100vh;
   margin: 10rpx,10rpx;
   // border-radius: 16rpx;
   padding: 30rpx;
   margin-bottom: 20rpx;
   // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .user-info {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: #fff;
	// border-radius: 16rpx;
	// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-right: 30rpx;
    }
    
    .info {
      flex: 1;
      
      .nickname {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .phone {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .edit-btn {
      padding: 20rpx;
      
      .icon-edit {
        font-size: 40rpx;
        color: #666;
      }
    }
  }
  
  .user-data {
    display: flex;
    padding: 30rpx 0;
    background: #fff;
    margin-bottom: 20rpx;
	margin-top: 20rpx;
	// border-radius: 16rpx;
	// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .data-item {
      flex: 1;
      text-align: center;
      
      .num {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .function-list {
    background: #fff;
    
    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #eee;
      
      .item-left {
        display: flex;
        align-items: center;
        
        .iconfont {
          font-size: 40rpx;
          margin-right: 20rpx;
          color: #666;
        }
        
        .name {
          font-size: 28rpx;
          color: #333;
        }
      }
      
      .icon-arrow-right {
        font-size: 32rpx;
        color: #999;
      }
    }
  }
  
  .logout-btn {
    margin: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    color: #000000;
    font-size: 28rpx;
    // border-radius: 16rpx;
  }
}
</style>